<template>
  <div id="hello">
    <Search></Search>
  <div id="all">
    <div>
      <Swiper auto :list="lunboArr" loop></Swiper>
      <div id="box">
          <div v-for="l in listArr" class="item">
            <img :src="l.img" class="item-img">
            <p>{{l.title}}</p>
          </div>
      </div>
    </div>
    <div id="fast-buy">
      <div class="left">
        <span class="fa fa-clock-o"></span>
        <span>限时抢购</span>
      </div>
      <div class="middle">
        <span>倒计时</span><span>{{d}}</span>天<span>{{h}}</span>时<span>{{m}}</span>分<span>{{s}}</span>秒
      </div>
      <span class="right">更多特惠></span>
    </div>
    <Scroller lock-y :scrollbar-x="false">
      <div class="list">
        <div class="list-item" v-for="s in buyArr">
          <img :src="s.img">
          <p>￥{{s.price}}</p>
        </div>
      </div>
    </Scroller>
    <div id="mobile">
      <span>——优选手机——</span>
    </div>
    <div class="mobile-img">
      <img src="/static/pic/1.jpg">
      <img src="/static/pic/2.jpg">
    </div>
    <div id="computer">
      <span>——优品电脑——</span>
    </div>
    <div class="mobile-img">
      <img src="/static/pic/3.jpg">
      <img src="/static/pic/4.jpg">
    </div>
    <div id="jewel">
      <span>——珠宝饰品——</span>
    </div>
    <div class="mobile-img">
      <img src="/static/pic/5.jpg">
      <img src="/static/pic/6.jpg">
    </div>
    <Divider>俺也是有底线的~</Divider>
  </div>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Search from '@/components/Search.vue';
import Tabbar from '@/components/Tabbar.vue';
import {mapState,mapGetters} from "vuex";
import {Swiper,Scroller,Divider} from 'vux';
export default{
  data:function(){
    return {
      t:"",
      x:"",
      d:"",
      h:"",
      m:"",
      s:""
    }
  },
  components:{
    Search,
    Swiper,
    Scroller,
    Tabbar,
    Divider
  },
  mounted:function(){
    this.$store.dispatch("requestLunbo");
    this.$store.dispatch("requestHarea");
    this.$store.dispatch("requestFastBuy");

    var EndTime = new Date(2017,11,11,0,0,0);
    var NowTime = new Date();
    this.t = EndTime.getTime()-NowTime.getTime()-30*24*60*60*1000;
    // console.log(this.t)
    if (this.t > 0) {
      this.d = Math.floor(this.t/1000/60/60/24);
      this.h = Math.floor(this.t/1000/60/60%24);
      this.m = Math.floor(this.t/1000/60%60);
      this.s = Math.floor(this.t/1000%60);
    }
    setInterval(()=>{
      this.t = this.t-1000
      // console.log(this.t)
      if (this.t > 0) {
      this.d = Math.floor(this.t/1000/60/60/24);
      this.h = Math.floor(this.t/1000/60/60%24);
      this.m = Math.floor(this.t/1000/60%60);
      this.s = Math.floor(this.t/1000%60);
    }
    }, 1000)
  },
  computed:{
    ...mapState([
      "lunboArr",
      "listArr",
      "buyArr"
    ])
  }
}
</script>

<style scoped>
  #hello{
    background-color: #eee;
  }
  #all{
    height: calc(100vh - 44px - 44px);
    overflow-y: scroll;
  }
  #box{
    margin-top: 6px;
    background-color: white;
    border-bottom: 1px solid #ccc;
  }
  .item{
    display: inline-block;
    width: 20%;
    text-align: center;
  }
  .item-img{
    height: 35px;
    width: 35px;
  }
  p{
    margin: 0;
    font-size: 12px;
  }
  #fast-buy{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    height: 30px;
    border-top: 1px solid #ccc;
    margin-top: 8px;
    padding: 6px 8px;
    background-color: white;
  }
  .left{
    color: red;
  }
  .right{
    height: 20px;
    padding: 1px 5px;
    background-color: orangered;
    color: white;
    border-radius: 10px;
    font-size: 11px;
  }
  .list{
    display: flex;
    width: 980px;
    margin-top: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    background-color: white;
  }
  .list-item{
    text-align: center;
    margin-left: 6px;
  }
  .list-item img{
    width: 75px;
    height: 75px;
  }
  #mobile{
    text-align: center;
    font-size: 14px;
    color: #1E90FF;
    font-family: 黑体;
    height: 25px;
    line-height: 25px;
    background-color: white;
    border-bottom: 1px solid #ddd;
  }
  .mobile-img{
    display: flex;
  }
  .mobile-img img{
    width: 50%;
    height: 170px;
  }
  #computer{
    text-align: center;
    font-size: 14px;
    color: #EE4000;
    font-family: 黑体;
    height: 25px;
    line-height: 25px;
    background-color: white;
    border-bottom: 1px solid #ddd;
  }
  #jewel{
    text-align: center;
    font-size: 14px;
    color: #9B30FF;
    font-family: 黑体;
    height: 25px;
    line-height: 25px;
    background-color: white;
    border-bottom: 1px solid #ddd;
  }
</style>
